<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>05 demo4</title>
</head>

<body>
    <h1>reset 事件，submit 事件</h1>

    <div style="font-family: Kaiti;font-size: large;">
        <p style="font-weight: bold;">form表单中button的介绍：</p>
        <p>
            注意，在form表单中，对于未指定type或者明确指定type="submit"的按钮，点击后都会触发提交，对与没有指定type的，浏览器默认将其类型视为submit。
        </p>
        <p>
            type="reset"的按钮会清空表单中的所有输入内容，并触发表单的 reset 事件。
        </p>
        <p>
            type="button" 明确指定按钮为普通按钮，点击时不会触发表单提交或重置行为。
        </p>
    </div>


    <form id="userForm">
        <label for="name">姓名1:</label>
        <input type="text" id="name1" name="name1"><br><br>
        <label for="name">姓名2:</label>
        <input type="text" id="name2" name="name2"><br><br>
        <button id="submit">提交</button>
        <button id="resetButton">重置</button>
        <button type="button">type="button"的普通按钮，点击后不会触发任何事件</button>
    </form>

    <script>
        // 获取表单元素
        const form = document.getElementById('userForm');
        const resetButton = document.getElementById('resetButton');

        // 提交事件
        form.addEventListener('submit', function (event) {
            // 阻止表单的默认提交行为
            event.preventDefault();

            // 获取输入内容
            const name1 = document.getElementById('name1').value;
            const name2 = document.getElementById('name2').value;

            // 在控制台中显示输入内容
            console.log(`姓名1: ${name1}`);
            console.log(`姓名2: ${name2}`);

            alert("表单已提交！");
        });

        // 手动绑定点击事件实现表单重置
        resetButton.addEventListener('click', function (event) {
            event.preventDefault();  // 阻止按钮的默认行为

            // 手动调用表单的 reset 方法
            form.reset();

            alert("表单已重置！");
        });
    </script>


</body>

</html>